<template>
  <div class="box6">
    <div class="title">
      <p>热门景区排行</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 图形图标 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";

// 获取DOM节点
let charts = ref();

// 组件挂载完毕
onMounted(() => {
  // 一个容器可以同事展示多种类型的图形图标
  let mychart = echarts.init(charts.value);
  //设置配置项
  mychart.setOption({
    // 标题组件
    title: {
      // 主标题
      text: "景区排行",
      // 标题的位置
      left: "50%",
      //   主标题文字样式
      textStyle: {
        color: "yellowgreen",
        fontSize: 20,
      },
      //子标题
      subtext: "各大景区排行",
      subtextStyle: {
        color: "yellowgreen",
        fontSize: 20,
      },
    },
    xAxis: {
      type: "category",
    },
    yAxis: {},
    //布局组件
    grid: {
      left: 20,
      right: 20,
      top: 20,
      bottom: 20,
    },
    series: [
      {
        type: "bar",
        data: [10, 20, 30, 40, 50],
        // 柱状图:图形上的文本标签
        label: {
          show: true,
          // 文字的位置
          position: "top",
          // 文字的颜色
          color: "yellowgreen",
        },
        // 是否显示背景颜色
        showBackground: true,
        backgroundStyle: {
          color: {
            type: "linear",
          },
        },
        // 主条的样式
        itemStyle: {
          borderRadius: [5, 5, 0, 0],
          color: "black",
        },
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.box6 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin: 20px 0px;

  .title {
    margin-left: 5px;

    p {
      color: white;
      font-size: 20px;
    }
  }
  .charts {
    height: calc(100% - 30px);
  }
}
</style>
